<template>
  <el-row class="hot-search">
        <xdh-pager class="pager" :total="pageInfo.total" 
        layout="prev,slot,next"
        :size="pageInfo.limit"
        :page="pageInfo.currentpage"
         :auto-layout="false"
         @current-change="pageChange">
            <span>
               <span>{{pageInfo.currentpage}}/{{pageInfo.pagecount}}</span>
            </span>
        </xdh-pager>
       <el-tabs v-model="activeTab" @tab-click="handleClick">
            <el-tab-pane label="热搜" name="hot">
               <span slot="label" class="hot-search-tab__label">热搜</span>
                <div>
                  <hot-search-item v-for="(item, idx) in hotList" :key="idx" :item="item" :seq="(pageInfo.currentpage-1) * pageInfo.limit+idx+1"></hot-search-item>
                </div>
              </el-tab-pane>
        </el-tabs>
  </el-row>
</template>
<script>
import hotSearchItem from './hot-search-item'
import XdhPager from '@/widgets/xdh-pager/xdh-pager'
import mSearch from '@/base/mixin/m-search'
export default {
    mixins: [mSearch],
    components: {
      hotSearchItem,
      XdhPager
    },
    data () {
      return {
        pageInfo: {
          limit: 5,
          total: 50,
          currentpage: 1,
          pagecount: 5
        },
        activeTab: 'hot',
        list: [
          {
            gjc: '江苏',
            sl: 120
          },
          {
            gjc: '江苏',
            sl: 123
          },
          {
            gjc: '江苏',
            sl: 120
          },
          {
            gjc: '江苏',
            sl: 123
          }
        ]
      }
    },
    computed: {
      hotList() {
        console.log(this.mSearch)
        let list = this.mSearch.hotSearch ? this.mSearch.hotSearch.list : [];
        let arr = list.slice((this.pageInfo.currentpage - 1) * this.pageInfo.limit, this.pageInfo.currentpage * this.pageInfo.limit);
        return arr;
      }
    },
    methods: {
      pageChange(val) {
        this.pageInfo.currentpage = val;
      }
    },
    created() {
      this.getHotSearch().then(res => {
        this.pageInfo.total = res.list.length;
        this.pageInfo.pagecount = Math.ceil(res.list.length / this.pageInfo.limit);
      });
    }
  }
</script>